<template>
  <div class="default-main ba-table-box">
    <el-alert class="ba-table-alert"
              v-if="baTable.table.remark"
              :title="baTable.table.remark"
              type="info"
              show-icon />
    <div class="top-block">
      <el-row align="middle">
        <span class="text">当前操作<span>{{ curDate }}</span>的采购成本。</span>
        <el-date-picker v-model="curDate"
                        type="month"
                        class="picker"
                        placeholder="选择月份"
                        value-format="YYYY-MM"
                        :clearable="false" />
      </el-row>
      <el-row :gutter="10"
              v-if="baTable.auth('getUploadInfo')">
        <el-col :span="1.5">
          <el-upload ref="upload"
                     class="upload-demo"
                     action=""
                     :show-file-list="false"
                     @change="onOrderUpload"
                     :auto-upload="false">
            <template #trigger>
              <el-button type="primary">上传产品成本文件</el-button>
            </template>
            <el-link style="color: #ffffff;"
                     :href="`${baseUrl}/product/productEstimate/getExportInfo?date=${curDate}`"
                     :underline="false">
              <el-button type="warning"
                         style="margin-left: 10px;vertical-align: initial;">
                {{ curDate }}产品成本文件下载
              </el-button>
            </el-link>
          </el-upload>
        </el-col>
      </el-row>
    </div>
    <!-- 表格顶部菜单 -->
    <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                 :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })">
      <template #month>
        <el-date-picker v-model="baTable.comSearch.form['date']"
                        type="month"
                        placeholder="选择月份"
                        value-format="YYYY-MM" />
      </template>
    </TableHeader>
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table />

    <!-- 表单 -->
    <PopupForm />

    <EditCom ref="editCom"
             :curRow="curRow" />
  </div>
</template>


<script setup lang="ts">
import { provide, reactive, ref, onBeforeMount } from 'vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useAdminInfo } from '/@/stores/adminInfo'
import { useI18n } from 'vue-i18n'
import { concat } from 'lodash-es'
import { ElMessage } from 'element-plus'
import EditCom from './editCom.vue'
import { fileUpload } from '/@/api/backend/product/productEstimate'
import { getUrl } from '/@/utils/axios'

defineOptions({
    name: 'product/productEstimate',
})

const { t } = useI18n()
const baseUrl = getUrl()
const editCom: any = ref<InstanceType<typeof EditCom>>()
const curDate = ref('')
const curRow = ref({} as anyObj)
const state: {
    buttonLoading: boolean
} = reactive({
    buttonLoading: false
})
const adminInfo = useAdminInfo()
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'info',
        title: 'Info',
        text:  '修改成本',
        type: 'primary',
        icon: '',
        class: 'newButton',
        disabledTip: true,
        display: (row: TableRow, field: TableColumn) => {
            return baTable.auth('updateCost')
        },
        click: (row: TableRow) => {
            curRow.value = { ...row }
            curRow.value.cost = Number(curRow.value.cost)
            editCom.value.show = true
        }
    }
]
optButtons = concat(defaultOptButtons(['edit', 'delete']), optButtons)
optButtons[1].display = (row) => {
    return row.id != adminInfo.id
}
const baTable = new baTableClass(
    new baTableApi('/product/productEstimate/'),
    {
        column: [
            {
                label: '月份',
                prop:  'date',
                operator: '=', 
                align: 'center',
                comSearchRender:'slot',
                comSearchSlotName: 'month',
            },
            {
                label: 'spu',
                align: 'center',
                prop: 'sku',
                operatorPlaceholder: '请输入spu'
            },
            {
                label: '产品成本￥(人民币)',
                align: 'center',
                prop: 'cost',
                operator: false
            },
            {
                label: '操作时间',
                align: 'center',
                prop: 'operate_time',
                operator: false
            },
            {
                label: t('Operate'),
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: optButtons,
                operator: false,
            }
        ],
        dblClickNotEditColumn: ['all']
    },
    {
        defaultItems: {
            status: '1',
        },
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()

const onOrderUpload = (file: any) => {
    let fd = new FormData()
    fd.append('file', file.raw)
    fileUpload(fd).then((res) => {
        if (res.code == 200) {
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
        } else {
            ElMessage ({
                type: 'error',
                message: '产品成本文件上传失败',
            })
        }
    })
}

onBeforeMount(() => {
    const year = new Date().getFullYear()
    const month = new Date().getMonth()
    if(month == 0) {
        curDate.value = `${year}-12`
    } else{
        curDate.value = `${year}-${month > 9 ? month : '0' + month}`
    }
})
</script>

<style scoped lang="scss">
.top-block{
    padding: 15px;
    background: #fff;
    .el-row{
        margin: 10px 0;
    }
    .text{
        font-size: 16px;
        span{
            padding: 0 5px;
            color: rgb(253, 47, 47);
            font-size: 20px;
        }
    }
    :deep(.picker){
        width: 200px !important;
    }
}

:deep(.el-date-editor.el-input){
    width: var(--el-input-width);;
}
</style>
